<template>
  <div>
    <!-- 图片区域 -->
    <img src="/static/tp/z1.png" alt="校园图" style="width:100%;max-width:600px;margin:0 auto;display:block;" />

    <!-- 表单容器 -->
    <div style="position:relative;z-index:999;padding:20px;">
      <!-- 姓名输入框 -->
      <div style="margin-bottom:20px;">
        <label>姓名*</label>
        <input
            type="text"
            v-model="name"
            style="width:100%;padding:1px;border:1px solid #000;margin-top:5px;box-sizing:border-box;"
            placeholder="请输入姓名"
        />
      </div>

      <!-- 学号输入框 -->
      <div style="margin-bottom:20px;">
        <label>学号*</label>
        <input
            type="text"
            v-model="studentId"
            style="width:100%;padding:1px;border:1px solid #000;margin-top:5px;box-sizing:border-box;"
            placeholder="请输入学号"
        />
      </div>

      <!-- 证件号输入框 -->
      <div style="margin-bottom:20px;">
        <label>证件号*</label>
        <input
            type="text"
            v-model="idNumber"
            style="width:100%;padding:1px;border:1px solid #000;margin-top:5px;box-sizing:border-box;"
            placeholder="请输入证件号"
        />
      </div>

      <!-- 提交按钮 -->
      <button @click="submitForm" style="width:100%;padding:10px;background:#0066cc;color:#fff;border:none;margin-bottom:15px;box-sizing:border-box;">
        提交领取
      </button>

      <!-- 管理员登录按钮 -->
      <button @click="goToAdminLogin" style="width:100%;padding:10px;background:#666;color:#fff;border:none;box-sizing:border-box;">
        管理员账号登录
      </button>
    </div>

    <p style="text-align:center;margin-top:20px;color:#666;">成电芯伙伴提供技术支持</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const name = ref('');
const studentId = ref('');
const idNumber = ref('');

const submitForm = () => {
  if (!name.value) {
    alert('请输入姓名');
  } else if (!studentId.value) {
    alert('请输入学号');
  } else if (!idNumber.value) {
    alert('请输入证件号');
  } else {
    alert(`提交成功：\n姓名：${name.value}\n学号：${studentId.value}\n证件号：${idNumber.value}`);
    uni.navigateTo({
      url: '/pages/index/shou_ye/di10',
      success: () => console.log('成功跳转到二维码领取页'),
      fail: (err) => {
        console.error('跳转二维码页失败:', err);
        alert('跳转失败，请检查页面路径是否正确');
      }
    });
  }
};

const goToAdminLogin = () => {
  uni.navigateTo({
    url: '/pages/index/shou_ye/di9',
    success: () => console.log('成功跳转到管理员登录页面'),
    fail: (err) => {
      console.error('跳转管理员登录页失败:', err);
      alert('跳转失败，请检查页面路径是否正确');
    }
  });
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
</style>